<template>
  <div class="new-table-style">
    <el-table :border="true" :data="tableData" align="left">
      <el-table-column label="标题" prop="title"></el-table-column>
      <el-table-column label="报销时间">
        <template slot-scope="scope">
          <span>{{ scope.row.feeTime | dateFormat('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="付款事项">
        <template slot-scope="scope">
          <span>{{ scope.row.paymentItemNames}}</span>
        </template>
      </el-table-column>
      <el-table-column label="报销总金额(元)">
        <template slot-scope="scope">
          <span>{{ scope.row.amount | fmoneyThousand }}</span>
        </template>
      </el-table-column>
      <el-table-column label="已报销金额(元)">
        <template slot-scope="scope">
          <span>{{ scope.row.reimbursedAmount || 0 | fmoneyThousand }}</span>
        </template>
      </el-table-column>
      <el-table-column label="报销说明" prop="description"></el-table-column>
    </el-table>
    <Pagination v-if="total > 0" @change="pageChange" :total="total" paginationLayout="total, prev, pager, next" />

    <div class="absolute-box btn-box flex">
      <el-button type="primary" size="mini" @click="uploadLoad">下载模板</el-button>
      <el-upload :show-file-list="false" style="padding: 0 10px" class="upload-demo" action accept="" :http-request="event => beforeupload(event.file)">
        <el-button type="primary" size="mini">导入</el-button>
      </el-upload>
      <!-- <el-button type="primary" size="mini">导出</el-button> -->
    </div>
  </div>
</template>

<script>
  import {apiExpenseList, apiExpenseImport} from '../../../api/expenseManage';
  import { accSubtr } from '@/common/js/utils.js';

  export default {
    name: 'billTable',
    props: {
      activeTab: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        tableData: [],
        total: 0,
        currentPage: 1,
        pageSize: 10,
      };
    },
    methods: {
      init() {
        this.getList();
      },

      //数据源
      async getList(more) {
        let res = await apiExpenseList({
          currentPage: more ? this.currentPage : 1,
          pageSize: this.pageSize,
        });
        this.tableData = res.rows || [];
        this.total = res.total || 0;
      },

      //分页
      pageChange(page) {
        this.currentPage = page.currentPage;
        this.getList('more');
      },

      //客户信息
      async toClientInfo(row) {
        localStorage.setItem('headerName', row.partnerName);
        let url = '/businessAssets/clientManage/info?isRefresh=true&headerName=客户详情&tab=contract&isHiddenTools=1&customerKey=' + row.partnerKey + '&clientName=' + row.partnerName;;
        window.open(url);
      },

      //下载
      uploadLoad() {
        let a = document.createElement('a');
        a.style.display = 'none';
        a.href = "/static/报销管理.xlsx";
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      },

      //导入
      beforeupload(file){
        apiExpenseImport(file).then(res => {
          this.$message.success('上传成功');
          this.getList('');
        });
      }
    },
  };
</script>

<style lang="scss" scoped>
  .search-style-box {
    background: #fbfbfb;
    border-radius: 3px;
    padding: 20px 20px 0;
    margin-bottom: 20px;
  }

  .btn-box {
    right: 0;
    top: -45px;
  }
</style>
